<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>工器具清单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style type="text/css">
			.title {
        padding: 15px;
        position: relative;
      }
      
      .title:before {
        content: '';
        display: block;
        width: 3px;
        height: 14px;
        position: absolute;
        left: 0;
        background: #3188FE;
        top: 50%;
        transform: translateY(-50%);
      }
      table{
        width: 100%;
        background: #FFFFFF;
        border-radius: 5px;
      }
      tr{
        border-bottom: 1px solid #DCDCDC;
      }
      tr:last-child{
        border: none;
      }
      th{
        color: #999999;
      }
      th, td{
        padding: 10px 0;
        text-align: center;
      }
		</style>
	</head>

	<body>
	  <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">工器具清单</h1>
    </header>
    <div class="mui-content padding-lr" id="container" v-cloak>
      <div class="title">工器具</div>
      <table border="0" cellspacing="0" cellpadding="0">
      	<tr>
      	  <th width="40">序号</th>
      	  <th>编号</th>
      	  <th>名称</th>
      	  <th>规格/型号</th>
      	</tr>
      	<tr v-for="(item, i) in utensil" :key="item.id" v-if="utensil.length">
      	  <td>{{i +1}}</td>
      	  <td>{{item.id}}</td>
      	  <td>{{item.name}}</td>
      	  <td>{{item.specs}}</td>
      	</tr>
      	<tr v-else>
      	  <td colspan="5">暂无数据</td>
      	</tr>
      </table>
      
      <div class="title">备品备件</div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th width="40">序号</th>
          <th>编号</th>
          <th>名称</th>
          <th>规格/型号</th>
          <th width="40">数量</th>
        </tr>
        <tr v-for="(item, i) in sparePart" :key="item.id" v-if="sparePart.length">
          <td>{{i +1}}</td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.specs}}</td>
          <td>{{item.quantity}}</td>
        </tr>
        <tr v-else>
          <td colspan="5">暂无数据</td>
        </tr>
      </table>
      
      <div class="title">耗材</div>
      <table border="0" cellspacing="0" cellpadding="0" class="margin-bottom">
        <tr>
          <th width="40">序号</th>
          <th>编号</th>
          <th>名称</th>
          <th>规格/型号</th>
          <th width="40">数量</th>
        </tr>
        <tr v-for="(item, i) in consumables" :key="item.id" v-if="consumables.length">
          <td>{{i +1}}</td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.specs}}</td>
          <td>{{item.quantity}}</td>
        </tr>
        <tr v-else>
          <td colspan="5">暂无数据</td>
        </tr>
      </table>
    </div>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/indexDBs.js"></script>
	<script type="text/javascript">
	  mui.init()
      let lineType =null;
      let db={};
      const dbName = 'myDBcheck'; //数据库
      const storeName = 'verifyList'; //仓库名
			let self=null; // 当前页面
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

     async function plusready() {
        self = plus.webview.currentWebview();
        vm.id = self.projectTaskId
        lineType = getSysInfo();
        // 打开数据库 const dbName = 'myDB', storeName = 'processPackage'
        await openDB(dbName, storeName, 1).then(res=>{
          console.log('111',res) 
          db=res;
        })
        //获取离线数据
        if(!lineType){
          getLineData(vm.id)
          return
        }
        vm.getData()
      }
      let vm = new Vue({
        el: '#container',
        data:{
          id:3,
          detail: {},
          consumables: [],
          sparePart: [],
          utensil: []
        },
        created() {
//        this.getData()
        },
        methods:{
          getData() {
            plus.nativeUI.showWaiting('加载中')
            mui.baseApp.httpRequst('get', '/app/api/project/execution/device/' + this.id, {}, (res) => {
              console.log(res) 
              plus.nativeUI.closeWaiting()
              this.consumables = res.data.consumables
              this.sparePart = res.data.sparePart
              this.utensil = res.data.utensil
            }, (err) => {
              plus.nativeUI.closeWaiting()
            })
          },
        }
      })
      // 获取离线数据
      function getLineData(taskId){
       getDataByKey(db, storeName,taskId).then(res=>{
         plus.nativeUI.closeWaiting()
         console.log('离线数据',JSON.stringify(res))
         vm.consumables = res.deviceList.consumables
         vm.sparePart = res.deviceList.sparePart
         vm.utensil = res.deviceList.utensil
          
       })
           
      }
      function getSysInfo() {
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
		</script>
	</body>

</html>